<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<link rel="stylesheet" type="text/css" th:href="@{/css/utils/list_bar.css}"/>
		<script th:src="@{/js/jquery-3.4.1.min.js}" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div th:fragment="nav">
		<!--分页-->
		<div class="page_nav">
				<div class="page_nav_content">
						<ul class="page_nav_list">
								<li><a id="firstpage" onclick="firstpage(this)">首页</a></li>
								<li><a id="prepage" onclick="prepage(this)">上一页</a></li>
								<li><a class="active_page" id="1th_page" onclick="page1(this)">1</a></li>
								<li><a class="stay_page" id="2th_page" onclick="page2(this)">2</a></li>
								<li><a class="stay_page" id="3th_page" onclick="page3(this)">3</a></li>
								<li><a class="stay_page" id="4th_page" onclick="page4(this)">4</a></li>
								<li><a class="stay_page" id="5th_page" onclick="page5(this)">5</a></li>
								<li><a id="nextpage" onclick="nextpage(this)">下一页</a></li>
								<li><a id="lastpage" onclick="lastpage(this)">尾页</a></li>
						</ul>

						<div class="page_opt">
								<input type="text" class="current_page" value="1"/> /
								<span class="all_page">999</span>&nbsp;页
								<a id="gotopage" onclick="turnPage(this)">GO</a>
						</div>
				</div>
		</div>
		<script type="text/javascript">
				//跳转首页
				function firstpage(btn) {
						var cname="."+ $(btn).parents("ul").parent().parent().parent().parent().prop("className");
						if ($(cname+' .current_page').val() != 1) {
								$(cname+' .active_page')[0].className = "stay_page";
								$(cname+' .current_page').val(1);
								var alist = $(cname+" .stay_page")
								for (var i = 0; i < 5; i++) {
										alist.eq(i).text(i + 1);
								}
								alist[0].className = "active_page";
								//加载首页数据
								getPage(1, 10);
						}
				}

				//跳转尾页
				function lastpage(btn) {
						var cname="."+ $(btn).parents("ul").parent().parent().parent().parent().prop("className");
						var lastpage = parseInt($(".all_page").text())
						if ($(cname+' .current_page').val() != lastpage) {
								$(cname+' .active_page')[0].className = "stay_page";
								$(cname+' .current_page').val(lastpage);
								var alist = $(cname+" .stay_page")

								if (lastpage >= 5) {
										for (var i = 0; i < 5; i++) {
												alist.eq(i).text(lastpage - 4 + i);
										}
										alist[4].className = "active_page";
								} else {
										alist[lastpage - 1].className = "active_page";
								}

								//加载尾页数据
								getPage(lastpage, 10)
						}
				}

				//上一页
				function prepage(btn) {
						var cname="."+ $(btn).parents("ul").parent().parent().parent().parent().prop("className");
						if ($(cname+" .active_page").eq(0).text() == 1) {
								return;
						}
						if ($(cname+" .active_page").eq(0).text() > 3 && $(cname+" .active_page").eq(0).text() <= $(cname+" .all_page").text() - 2) {
								$(cname+' .active_page')[0].className = "stay_page";
								var lis = $(cname+" .stay_page");
								for (var i = 0; i < lis.length; i++) {
										var num = parseInt(lis.eq(i).text());
										lis.eq(i).text(num - 1);
								}
								lis[2].className = "active_page";
								var currentpage = $(cname+" .active_page").eq(0).text();
								$(cname+" .current_page").eq(0).val(currentpage);
						} else {
								var ac = $(cname+" .active_page");
								$(cname+' .active_page')[0].className = "stay_page";
								var lis = $(cname+" .stay_page");
								var index = lis.index(ac);
								lis[index - 1].className = "active_page";
								lis[index].className = "stay_page";
								$(cname+" .current_page").eq(0).val($(cname+" .active_page").eq(0).text());
						}
						//加载当前页数据

						getPage($(cname+" .current_page").eq(0).val(), 10)
				}

				//下一页
				function nextpage(btn) {
						// console.log($(btn).parents("ul").parent().parent().parent().parent().prop("className"))
						var cname="."+ $(btn).parents("ul").parent().parent().parent().parent().prop("className");
						if ($(cname+" .active_page").eq(0).text() == $(cname+" .all_page").text()) {
								return;
						}
						if ($(cname+" .active_page").eq(0).text() >= 3 && $(cname+" .active_page").eq(0).text() < $(cname+" .all_page").text() - 2) {
								var index = $(cname+" .active_page").eq(0).text();
								$(cname+' .active_page')[0].className = "stay_page";
								var lis = $(cname+" .stay_page");
								for (var i = 0; i < lis.length; i++) {
										var num = parseInt(lis.eq(i).text());
										lis.eq(i).text(num + 1);
								}
								lis[2].className = "active_page";
								var currentpage = $(cname+" .active_page").eq(0).text();
								$(cname+" .current_page").eq(0).val(currentpage);
						} else {
								var ac = $(cname+" .active_page");
								$(cname+' .active_page')[0].className = "stay_page";
								var lis = $(cname+" .stay_page");

								var index = lis.index(ac);
								lis[index + 1].className = "active_page";
								lis[index].className = "stay_page";
								$(cname+" .current_page").eq(0).val($(cname+" .active_page").eq(0).text());
						}
						//加载当前页数据
						getPage($(cname+" .current_page").eq(0).val(),10);
				}

				//选择页面
				function page1(btn) {
						var cname="."+ $(btn).parents("ul").parent().parent().parent().parent().prop("className");
						if ($(btn)[0].className == "active_page" ||$(btn).text() > $(".all_page").text()) {
								return;
						}

						var index =$(btn).text();
						$(cname+' .active_page')[0].className = "stay_page";
						var text = parseInt($(btn).text());
						if (text > 3 && text < $(cname+" .all_page").text() - 2) {
								var lis = $(cname+" .stay_page");
								lis.eq(2).text(text);
								lis.eq(0).text(text - 2);
								lis.eq(1).text(text - 1);
								lis.eq(3).text(text + 1);
								lis.eq(4).text(text + 2);
								lis[2].className = "active_page";
						} else {
								$(btn)[0].className = "active_page";
						}
						var currentpage = $(cname+" .active_page").eq(0).text();
						$(cname+" .current_page").eq(0).val(currentpage);
						getPage(index, 10);
				}

				function page2(btn) {
						var cname="."+ $(btn).parents("ul").parent().parent().parent().parent().prop("className");
						if ($(btn)[0].className == "active_page" ||$(btn).text() > $(cname+" .all_page").text()) {
								return;
						}
						var index =$(btn).text();
						$(cname+' .active_page')[0].className = "stay_page";
						var text = parseInt($(btn).text());
						if (text > 3 && text < $(cname+" .all_page").text() - 2) {
								var lis = $(cname+" .stay_page");
								lis.eq(2).text(text);
								lis.eq(0).text(text - 2);
								lis.eq(1).text(text - 1);
								lis.eq(3).text(text + 1);
								lis.eq(4).text(text + 2);
								lis[2].className = "active_page";
						} else {
								$(btn)[0].className = "active_page";
						}
						var currentpage = $(cname+" .active_page").eq(0).text();
						$(cname+" .current_page").eq(0).val(currentpage);
						getPage(index, 10);
				}

				function page3(btn) {
						var cname="."+ $(btn).parents("ul").parent().parent().parent().parent().prop("className");
						if ($(btn)[0].className == "active_page" ||$(btn).text() > $(cname+" .all_page").text()) {
								return;
						}
						var index =$(btn).text();
						$(cname+' .active_page')[0].className = "stay_page";
						var text = parseInt($(btn).text());
						if (text > 3 && text < $(cname+" .all_page").text() - 2) {
								var lis = $(cname+" .stay_page");
								lis.eq(2).text(text);
								lis.eq(0).text(text - 2);
								lis.eq(1).text(text - 1);
								lis.eq(3).text(text + 1);
								lis.eq(4).text(text + 2);
								lis[2].className = "active_page";
						} else {
								$(btn)[0].className = "active_page";
						}
						var currentpage = $(cname+" .active_page").eq(0).text();
						$(cname+" .current_page").eq(0).val(currentpage);
						getPage(index, 10);
				}

				function page4(btn) {
						var cname="."+ $(btn).parents("ul").parent().parent().parent().parent().prop("className");
						if ($(btn)[0].className == "active_page" ||$(btn).text() > $(cname+" .all_page").text()) {
								return;
						}
						var index =$(btn).text();
						$(cname+' .active_page')[0].className = "stay_page";
						var text = parseInt($(btn).text());
						if (text > 3 && text < $(cname+" .all_page").text() - 2) {
								var lis = $(cname+" .stay_page");
								lis.eq(2).text(text);
								lis.eq(0).text(text - 2);
								lis.eq(1).text(text - 1);
								lis.eq(3).text(text + 1);
								lis.eq(4).text(text + 2);
								lis[2].className = "active_page";
						} else {
								$(btn)[0].className = "active_page";
						}
						var currentpage = $(cname+" .active_page").eq(0).text();
						$(cname+" .current_page").eq(0).val(currentpage);
						getPage(index, 10);
				}

				function page5(btn) {
						var cname="."+ $(btn).parents("ul").parent().parent().parent().parent().prop("className");
						if ($(btn)[0].className == "active_page" ||$(btn).text() > $(cname+" .all_page").text()) {
								return;
						}
						var index =$(btn).text();
						$(cname+' .active_page')[0].className = "stay_page";
						var text = parseInt($(btn).text());
						if (text > 3 && text < $(cname+" .all_page").text() - 2) {
								var lis = $(cname+" .stay_page");
								lis.eq(2).text(text);
								lis.eq(0).text(text - 2);
								lis.eq(1).text(text - 1);
								lis.eq(3).text(text + 1);
								lis.eq(4).text(text + 2);
								lis[2].className = "active_page";
						} else {
								$(btn)[0].className = "active_page";
						}
						var currentpage = $(cname+" .active_page").eq(0).text();
						$(cname+" .current_page").eq(0).val(currentpage);
						getPage(index, 10);
				}

				//跳转指定页面
				function turnPage(btn) {
						var cname="."+ $(btn).parent().parent().parent().parent().parent().prop("className");
						if (isNaN($(cname+" .current_page").eq(0).val())) {
								alert("请输入数字！");
								$(cname+".current_page").eq(0).val($(cname+' .active_page').eq(0).text());
						}
						if (parseInt($(cname+" .current_page").eq(0).val()) == parseInt($(cname+" .active_page").eq(0).text())) {
								return;
						}
						if (parseInt($(cname+" .current_page").eq(0).val()) > parseInt($(cname+" .all_page").eq(0).text())) {
								alert("对不起，没有这么多页！");
								$(cname+" .current_page").eq(0).val($(cname+' .active_page').eq(0).text());
								return;
						}
						$(cname+' .active_page')[0].className = "stay_page";
						var text = parseInt($(cname+" .current_page").eq(0).val());
						if (text > 3 && text < $(cname+" .all_page").text() - 2) {
								var lis = $(cname+" .stay_page");
								lis.eq(2).text(text);
								lis.eq(0).text(text - 2);
								lis.eq(1).text(text - 1);
								lis.eq(3).text(text + 1);
								lis.eq(4).text(text + 2);
								lis[2].className = "active_page";
						} else {
								var li = $(cname+" .stay_page");
								var index = text % 5;
								for (var i = 0; i < 5; i++) {
										if (text < 5) {
												li.eq(i).text(text - (index - i) + 1);
										} else
												li.eq(i).text(text - (index - i));
								}
								if (text < 5) {
										li[index - 1].className = "active_page";
								} else
										li[index].className = "active_page";
						}
						//加载页面数据

						getPage(text, 10);
				}

				function Format(now, mask) {
						var d = new Date(now);
						var zeroize = function (value, length) {
								if (!length) length = 2;
								value = String(value);
								for (var i = 0, zeros = ''; i < (length - value.length); i++) {
										zeros += '0';
								}
								return zeros + value;
						};

						return mask.replace(/"[^"]*"|'[^']*'|\b(?:d{1,4}|m{1,4}|yy(?:yy)?|([hHMstT])\1?|[lLZ])\b/g, function ($0) {
								switch ($0) {
										case 'd':
												return d.getDate();
										case 'dd':
												return zeroize(d.getDate());
										case 'ddd':
												return ['Sun', 'Mon', 'Tue', 'Wed', 'Thr', 'Fri', 'Sat'][d.getDay()];
										case 'dddd':
												return ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][d.getDay()];
										case 'M':
												return d.getMonth() + 1;
										case 'MM':
												return zeroize(d.getMonth() + 1);
										case 'MMM':
												return ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][d.getMonth()];
										case 'MMMM':
												return ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'][d.getMonth()];
										case 'yy':
												return String(d.getFullYear()).substr(2);
										case 'yyyy':
												return d.getFullYear();
										case 'h':
												return d.getHours() % 12 || 12;
										case 'hh':
												return zeroize(d.getHours() % 12 || 12);
										case 'H':
												return d.getHours();
										case 'HH':
												return zeroize(d.getHours());
										case 'm':
												return d.getMinutes();
										case 'mm':
												return zeroize(d.getMinutes());
										case 's':
												return d.getSeconds();
										case 'ss':
												return zeroize(d.getSeconds());
										case 'l':
												return zeroize(d.getMilliseconds(), 3);
										case 'L':
												var m = d.getMilliseconds();
												if (m > 99) m = Math.round(m / 10);
												return zeroize(m);
										case 'tt':
												return d.getHours() < 12 ? 'am' : 'pm';
										case 'TT':
												return d.getHours() < 12 ? 'AM' : 'PM';
										case 'Z':
												return d.toUTCString().match(/[A-Z]+$/);
										// Return quoted strings with the surrounding quotes removed
										default:
												return $0.substr(1, $0.length - 2);
								}
						});
				}
		</script>
</div>

</body>
</html>